import React from "react";
import {LockOutlined, UserOutlined} from '@ant-design/icons';
import {Button, Form, Input, Tabs, Typography} from "antd";

import img01 from "../../assets/img/login-img.png";

import BaseComponent from "../../redare/components/BaseComponent";
import WebWorkbenchPresenter from "../../.gen/presenter/WebWorkbenchPresenter";

const {Title} = Typography;

export default class LoginPage extends BaseComponent {

    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
        this.presenter = new WebWorkbenchPresenter(this)
    }

    componentDidMount() {
        // 监听回车事件
        document.addEventListener("keydown", (e) => {
            if (e.keyCode === 13) {
                this._login();
            }
        });
    }

    _setButtonLoading(loading) {
        this.setState({loading})
    }

    _login() {
        let form = this.form;
        form.validateFields().then(
            (formData) => {
                this._setButtonLoading(true);
                this.presenter.login(
                    formData,
                    (s_re) => {
                        let {backUrl} = this._urlQuery;
                        this._setButtonLoading(false);
                        this.toastSuccess("登录成功");
                        if (backUrl) {
                            window.location.href = backUrl;
                        }else{
                            window.location.href = window._ctx + "/";
                        }
                    },
                    (f_re) => {
                        this._setButtonLoading(false)
                    }
                );
            }
        );
    }

    render() {
        let successUrl = window._ctx;
        return (
            <div className="Login-Page">
                <div className="login-box bg-white">
                    <div className="pic">
                        <img className="" src={img01}/>
                    </div>
                    <div className="con">
                        <Title level={3} className="align-txt">消防安全测评系统</Title>
                        <div style={{marginTop: 60}}/>
                        <Form ref={(o) => this.form = o} className="login-form">
                            <Form.Item name="account" rules={[{required: true, message: '请输入账号！'}]}>
                                <Input
                                    prefix={<UserOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                                    placeholder="账户"/>
                            </Form.Item>
                            <Form.Item name="pwd" rules={[{required: true, message: '请输入登录密码！'}]}>
                                <Input
                                    prefix={<LockOutlined style={{color: 'rgba(0,0,0,.25)'}}/>}
                                    type="password"
                                    placeholder="密码"/>
                            </Form.Item>
                            <Form.Item>
                                <Button type="primary" className="login-form-button" loading={this.state.loading}
                                        onClick={this._login.bind(this)}>
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                    </div>
                </div>
            </div>
        );
    }
}